<template>
  <div class="nav-outer">
    <div class="nav-wrapper">
      <img
        src="@/assets/image/logo.png"
        alt="ToKnow"
        class="logo"
        @click="open('/')"
      />

      <item-list
        class="nav-list"
        :items="contentTypesZh"
        :idx="contentTypeIdx"
        @changeIdx="changeContentType"
      ></item-list>

      <user-card class="user-card"></user-card>

      <div class="search-wrapper">
        <search-bar
          class="search-bar"
          v-model:searchValue="searchValue"
          @search="search"
          :width="200"
          :height="35"
        ></search-bar>

        <pub-sth class="pub-sth" @click="open('/publish/article')"></pub-sth>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SearchBar from './utils/SearchBar.vue'
import PubSth from './TopNavCom/PubSth.vue'
import UserCard from './TopNavCom/UserCard.vue'
import ItemList from './utils/ItemList.vue'
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { open } from '@/utils/link'

const contentTypes = ['article', 'source']
const contentTypesZh = ['文章', '资源']

const searchValue = ref('')

const route = useRoute()
let contentTypeIdx = computed(() => {
  return route.path.endsWith('source')
    ? 1
    : route.path.endsWith('article')
    ? 0
    : -1
})

const router = useRouter()
function changeContentType(idx: number) {
  if (route.path.endsWith('source') || route.path.endsWith('article')) {
    router.push({
      path: `./${contentTypes[idx]}`,
      query: route.query,
    })
  } else {
    router.push({
      name: idx ? 'indexSource' : 'indexArticle',
    })
  }
}

function search() {
  let routeName = route.name as string
  if (['searchArticle', 'searchSource'].includes(routeName)) {
    router.push({
      path: route.path,
      query: {
        ...route.query,
        q: searchValue.value,
      },
    })
  } else if (['indexArticle', 'indexSource'].includes(routeName)) {
    router.push({
      name: `search${routeName.slice(5)}`,
      query: {
        ...route.query,
        q: searchValue.value,
      },
    })
  } else {
    router.push({
      path: 'searchArticle',
      query: {
        q: searchValue.value,
      },
    })
  }
}
</script>

<style scoped lang="scss">
@import 'style/config';
@import 'style/shortcut';

.nav-outer {
  position: fixed;
  top: 0;
  width: 100vw;
  background-color: white;

  .user-log {
    transition: 0.3s;
  }
}

.nav-wrapper {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: $iw;
  // border-bottom: 2px solid black;
  height: $th;

  .logo,
  .nav-list {
    float: left;
  }

  .search-wrapper,
  .user-card {
    float: right;
  }

  .logo {
    height: $th;

    &:hover {
      cursor: pointer;
    }
  }

  .nav-list {
    margin-left: 20px;
    --itemNum: 4;
    --itemListWidth: 300px;
    --itemListHeight: $th;
  }

  .pub-sth {
    transition: 0.1s;
  }

  .user-card {
    z-index: 9999;
    margin-right: 20px;
  }

  .search-wrapper {
    position: relative;
    @include flex();
    margin-right: 20px;
    height: $th;
    width: 350px;

    .pub-sth {
      margin-left: 20px;
    }

    &:focus-within {
      .search-bar {
        width: 100%;
      }

      .pub-sth {
        opacity: 0;
        width: 0;
      }
    }
  }
}
</style>
